<template>
	<div class="tagsview usn">
		<el-tabs @tab-remove="tabRemove" :value="$route.path" type="card" @tab-click="to">
			<el-tab-pane :key="item.to" :closable="item.to!=='/dashboard'" v-for="(item, index) in tabs"
				:name="item.to">
				<span slot="label">
					<i v-if="$route.path===item.to" class="el-icon-refresh-right refresh"
						@click="refreshPage(item)"></i>
					<span>{{item.text}}</span>
				</span>
			</el-tab-pane>
		</el-tabs>
		<div ref="tagsview-menu" class="tagsview-menu" v-show="showTagsviewMenu" @blur="showTagsviewMenu=false"
			@click.stop>
			<el-button type="primary" @click="closeAll">关闭全部</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				tabs: [{
					text: '仪表盘',
					to: '/dashboard'
				}],
				blackList: ['/dashboard', '/404'],
				showTagsviewMenu: false
			}
		},
		mounted() {
			this.update()
			this.initTagsviewMenu()
		},
		methods: {
			initTagsviewMenu() {
				this.$el.oncontextmenu = (e) => {
					this.showTagsviewMenu = true
					let container = document.documentElement
					let menu = this.$refs['tagsview-menu']
					var evt = window.event || arguments[0];

					/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
					var rightedge = container.clientWidth - evt.clientX;
					var bottomedge = container.clientHeight - evt.clientY;

					/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
					if (rightedge < menu.offsetWidth)
						menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";
					else
						/*否则，就定位菜单的左坐标为当前鼠标位置*/
						menu.style.left = container.scrollLeft + evt.clientX + "px";

					/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
					if (bottomedge < menu.offsetHeight)
						menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
					else
						/*否则，就定位菜单的上坐标为当前鼠标位置*/
						menu.style.top = container.scrollTop + evt.clientY + "px";

					return false
				}

				//关闭tagsView-menu的显示
				document.addEventListener('click', () => {
					this.showTagsviewMenu = false
				})
			},
			to(e) {
				this.$router.push(e.name)
			},
			update() {
				let title = this.$route.meta.title

				//修改网页标题
				document.title = "HUXY-" + title

				//如果页面在黑名单中，不就行操作
				if (this.blackList.includes(this.$route.path)) return
				let index = -1

				//如果从tabs中找到了当前路由信息，刷新下对应tab的显示
				if ((index = this.tabs.findIndex(item => item.name == this.$route.name)) != -1) {
					this.tabs[index] = {
						text: title,
						to: this.$route.path,
						name: this.$route.name
					}
				} else {
					//如果没有找到当前路由，并且当前路由有标题，则添加到tabs中
					if (title) {
						this.tabs.push({
							text: title,
							to: this.$route.path,
							name: this.$route.name
						})
						this.$store.commit('tagsView/add_view', this.$route.name)
					}
				}
			},
			tabRemove(path) {
				//找到要删除的tab目标
				let obj = this.tabs.splice(this.tabs.findIndex(item => item.to === path), 1)[0]
				//执行删除
				if (obj) {
					this.$store.commit('tagsView/del_view', obj.name)
				}
				//如果当前删除页面正在浏览，则跳转到前一个页面
				if (path === this.$route.path) {
					this.$router.push(this.tabs[this.tabs.length - 1].to)
				}
			},
			refreshPage(obj) {
				//第一次点击刷新时不生效，用这个办法解决下
				if (!this.asjkldajsldbhjkas) {
					this.asjkldajsldbhjkas = true
					setTimeout(() => {
						this.refreshPage(obj)
					}, 50)
				}

				if (obj) {
					//删除页面缓存
					this.$store.commit('tagsView/del_view', obj.name)
				}
				//去趟404
				this.$router.replace("/404")

				//然后回到当前页面，实现“刷新”
				this.$nextTick(() => {
					this.$store.commit('tagsView/add_view', obj.name)
					this.$router.replace(obj.to)
				})
			},
			closeAll() {
				//关闭所有页面（除了Dashboard）
				//倒序遍历所有tab，不倒序遍历会有问题
				for (let i = this.tabs.length - 1; i >= 0; i--) {
					let item = this.tabs[i]
					//不能删除Dashboard
					if (item.to != '/dashboard') {
						//执行删除缓存，和删除tab
						this.$store.commit('tagsView/del_view', item.name)
						this.tabs.splice(this.tabs.findIndex(obj => item.name === obj.name), 1)
					}
				}
				//如果当前页面也被删除，就回到Dashboard页面
				if (this.$route.path != '/dashboard') {
					this.$router.replace('/dashboard')
				}

				//关闭右键菜单
				this.showTagsviewMenu = false
			}
		},
		watch: {
			$route(to) {
				this.update()
			}
		}
	}
</script>

<style lang="scss">
	.tagsview {
		.el-tabs__content {
			display: none;
		}

		.is-active {
			color: #f00 !important;
		}

		.refresh {
			margin-right: 10px;
		}

		.tagsview-menu {
			position: fixed;
			z-index: 30;
		}
	}
</style>
